<template>
    <div class="container">
        <div class="comment">
            <van-field class="text" v-model="message" rows="2" autosize label="评价内容" type="textarea" maxlength="100"
                placeholder="请输入评价内容" show-word-limit />
            <div class="first">
                服务评价
                <van-rate v-model="rate1" size="20" allow-half />
            </div>

            <van-divider />
            <div class="sec">
                商品评价
                <van-rate v-model="rate2" size="20" allow-half />
            </div>

            <br>
            <div class="thr">
                上传图片
                <van-uploader v-model="fileList" :before-read="beforeRead" :after-read="afterRead"
                    :delete="deleteImg" />
            </div>

            <br>
            <van-button type="primary" @click="submit" class="btn">提交</van-button>
        </div>
    </div>
</template>

<script >
import { upload } from '@/utils/upload.js'
import { orderReview } from '@/api/order.js'
export default {
    data() {
        return {
            message: '',
            fileList: [],
            imgUrls: this.$baseApi,
            rate1: 5,
            rate2: 5,
            unique: '',
            pics: [],
        }
    },
    methods: {
        submit() {
            if (this.message == '') {
                this.$toast('请输入评价内容');
                return;
            }
            orderReview({
                comment: this.message,
                serviceScore: this.rate1,
                pics: this.fileList[0],
                productScore: this.rate2,
                unique: this.$route.query.unique
            }).then(res => {
                if (res.code == 200) {
                    this.$toast('评价成功');
                    this.$router.push('/order');

                }
                this.$router.go(-1);
            })

        },
        beforeRead(file) {
            if (!/(jpg|jpeg|png|JPG|PNG)/i.test(file.type)) {
                this.$toast("请上传正确格式的图片");
                return false;
            }
            return true;
        },
        afterRead(file) {
            let formData = new FormData();
            formData.append('file', file.file);
            upload(formData).then(res => {
                if (res.status == 200) {
                    this.$toast('上传成功');
                    this.fileList.push(res.data.url);
                    for (let i = 0; i < res.data.data.length; i++) {
                        this.pics.push(res.data.data[i]);
                    }
                }
            })
        },
        deleteImg(file) {
            for (let i = 0, len = this.uploadImage.length; i < len; i++) {
                if (file.file.name === this.uploadImage[i].name && file.file.size === this.uploadImage[i].size) {
                    this.uploadImage.splice(i, 1)
                    break
                }
            }
        }
    }
}

</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 100%;
    height: 100%;
    background: #fff;
}

.commnet {
    width: 100%;
    height: 100%;
    background: #fff;

    .text {
        width: 100%;
        height: 100%;
        background: #fff;
        border: none;
    }
}

.btn {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: #ff6700;
    color: #fff;
    border-radius: 0;
}

.first {
    margin-left: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 14px;
    color: #333;

    .van-rate {
        margin-right: 30px;
    }
}

.sec {
    margin-left: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 14px;
    color: #333;

    .van-rate {
        margin-right: 30px;
    }
}
.thr {
    margin-left: 15px;
    margin-right: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 14px;
    color: #333;
}
</style>